<template>
  <div class="admin-red-main">
    <van-popup v-model="show" @close="hanleClose">
      <div class="wrapper" v-show="redStatus === 0">
        <div class="close" @click="hanleClose">
          <van-icon name="cross" />
        </div>
        <div class="header">
          <img :src="decoration"> <span>发红包</span> <img class="rotate" :src="decoration">
        </div>
        <div class="field-box">
          <div class="input-box">
            <div class="title"><span>*</span>总金额</div>
            <div class="input"><input type="number" v-model="money" @change="check_price" placeholder="0.00"></div>
            <div class="unit">元</div>
          </div>
          <div class="desc">当前为拼手气红包，红包金额上限200元</div>
        </div>
        <div class="field-box">
          <div class="input-box">
            <div class="title"><span>*</span>红包个数</div>
            <div class="input"><input type="number" v-model="nums" placeholder="填写个数"></div>
            <div class="unit">个</div>
          </div>
          <div class="desc">当前直播间人数100个，单个红包数量上限100个</div>
        </div>
        <div class="field-box">
          <div class="input-box">
            <div class="title"><span>*</span>倒计时</div>
            <div class="input"><input type="number" v-model="delaySeconds" placeholder="填写时间"></div>
            <div class="unit">秒</div>
          </div>
          <div class="desc">默认0秒立即发放，最长时间300秒</div>
        </div>
        <div class="submit-btn" @click="handleSendRed">
          <button>塞进红包</button>
        </div>
        <div class="tips-box">
          <div class="title">提示:</div>
          <p>1、管理员无法抢红包</p>
          <p>2、红包手续费1%</p>
          <p>3、未领取的红包，将于24小时内退回至平台账户</p>
        </div>
      </div>
      <div class="wrapper" v-show="redStatus===1">
        <div class="close" @click="hanleClose">
          <van-icon name="cross" />
        </div>
        <div class="paper-bg">
          <img :src="paper" class="bgimg">
          <img class="avatar" :src="redData.headimgurl">
        </div>
        <div class="red-info">
          <div class="seller-name spacing-12">{{channelName}}</div>
          <div class="spacing-73">直播间红包</div>
          <div class="spacing-24">红包金额: {{redData.money}}</div>
          <div class="spacing-24">剩余金额: {{redData.alsoMoney}}</div>
          <div class="spacing-24">红包人数: {{redData.number}}</div>
          <div>剩余可抢人数: {{redData.alsoNumber	}}</div>
        </div>
        <div class="another-one" @click="handleOneRed">
          再发一个
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import decoration from '../../assets/live/img_decoration.png'
import paper from '../../assets/live/img_paper_bg.png'
import http from "@/utils/request"
import $api from "@/api/index";

export default {
  props: {
    redData: {
      type: Object,
      default: () => {
        return {
        }
      }
    },
    channelName: {
      type: Number | String
    },
    redStatus: {
      type: Number,
      default: 0
    },
    channelId: {
      type: Number | String
    }
  },
  data() {
    return {
      show: true,
      hasredInfo: false,
      decoration,
      paper,
      money: '',
      nums: '',
      countDown: ''
    }
  },
  methods: {
    hanleClose() {
      this.$emit('onClose')
    },
    handleOneRed() {
      this.redStatus = 0
    },
    handleSendRed() {
          http.request({
              url: "/api/mobile/public/redPacket/pay",
              method: "post",
              data: {
                channelId: this.channelId,
                delaySeconds:this.delaySeconds || 0,
                money:this.money * 100,
                number:this.nums,
                content:''
              }
          }).then((res)=>{
            console.log(res)
            if(res.status == 10000){
            let datas = res.data.data
            let that = this
            function onBridgeReady() {
              WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                    "appId": datas.appId,     //公众号名称，由商户传入
                    "timeStamp": datas.timeStamp,         //时间戳，自1970年以来的秒数
                    "nonceStr": datas.nonceStr, //随机串
                    "package": datas.package,
                    "signType": datas.signType,         //微信签名方式：
                    "paySign": datas.paySign //微信签名
                },
                function (res) {
                    if (res.err_msg == "get_brand_wcpay_request:ok") {//红包发放成功
                      that.$toast.success('发放成功');
                      setTimeout( that.hanleClose(), 1500);
                      
                    } else {
                      that.$toast.fail('您已取消支付');
                    }
                }
              )}
              if (typeof WeixinJSBridge == "undefined") {
                  if (document.addEventListener) {
                      document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                  } else if (document.attachEvent) {
                      document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                      document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                  }
              } else {
                  onBridgeReady();
              }
            }
          });
      // fetchSendRed({ money: this.money, nums: this.nums, countDown: this.countDown, channelId: this.channelId }).then(res => {
      //   console.log(res.data)
      // })
    },
    check_price() {
      let price = '' + this.money
      price = price
        .replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符
        .replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
        .replace('.', '$#$')
        .replace(/\./g, '')
        .replace('$#$', '.')
        .replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3') // 只能输入两个小数
      if (price.indexOf('.') < 0 && price != '') {
        // 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
        price = parseFloat(price)
      }
      this.money = price
    }
  }
}
</script>
<style>
.van-popup{
  background: transparent;
}
</style>
<style lang="scss" scoped>
 .admin-red-main {
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   z-index: 5;
   .wrapper{
     width: 600px;
     height: 950px;
     background: #FA4141;
     border-radius: 16px;
     position: relative;
    //  padding: 0 40px;
     .close{
       color: #fff;
       font-size: 32px;
       position: absolute;
       right: 24px;
       top: 24px;
     }
     .header{
       text-align: center;
       padding: 40px 0;
       img{
         width: 56px;
         height: 20px;
         vertical-align: middle;
       }
       span{
        font-size: 40px;
        color: #FEE4B2;
        padding: 0 24px;
        vertical-align: middle;
       }
       .rotate{
         transform:  rotate(180deg);
       }
     }
     .field-box {
       margin-bottom: 40px;
       padding: 0 35px;
       .input-box {
         background: #fff;
         height: 94px;
         border-radius: 8px;
         padding: 0 20px;
         display: flex;
         align-items: center;
         .title{
           font-size: 30px;
           color: #333333;
           position: relative;
           padding-left: 30px;
           span{
             color: #db1919;
             font-size: 50px;
             position: absolute;
             top:10%;
             left: 0;
           }
         }
         .input {
           flex:1;
           padding:0 12px;
           input {
             font-size: 30px;
             width: 100%;
             text-align: right;
             border: 0;
           }
         }
         .unit{
           color: #333333;
           font-size: 30px;
         }
       }
       .desc{
         margin-top: 12px;
         color: #FEE4B2;
         font-size: 24px;
       }
     }
     .submit-btn{
       padding: 0 35px;
       margin: 24px 0;
       button {
         width: 100%;
         height: 88px;
         line-height: 88px;
         background: #FFE492;
         color: #F83535;
         font-size: 40px;
         font-weight: bold;
         border-radius: 12px;
         border: 0;
       }
     }
     .tips-box{
       color: #fff;
       font-size: 24px;
       padding: 0 0 0 35px;
     }
     .paper-bg{
       width: 100%;
       margin: 127px 0 20px 0;
       text-align: center;
       display: inline-block;
       .bgimg {
         height: 100%;
         height: 138px;
       }
       .avatar {
         width: 124px;
         height: 124px;
         border-radius: 50%;
         margin-top: -80px;
       }
     }
     .red-info{
       text-align: center;
       color: #FEE4B2;
       font-size: 28px;
       .seller-name{
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
       }
       .spacing-12{
         margin-bottom: 12px;
       }
       .spacing-24 {
         margin-bottom: 24px;
       }
       .spacing-73 {
         margin-bottom: 73px;
       }
     }
     .another-one{
       position: absolute;
       bottom: 52px;
       color: #fff;
       text-align: center;
       left: 0;
       right: 0;
       font-size: 30px;
     }
   }
 }
</style>
